<template>
  <div id="app">
    <div class="app-container">
      <aside class="sidebar" :class="{ collapsed: isCollapsed }">
        <nav class="sidebar-nav">
          <div v-for="(category, index) in categories" :key="index" class="category">
            <div class="category-header" @click="toggleCategory(index)">
              <span class="category-title">{{ category.name }}</span>
              <span class="toggle-icon">{{ category.expanded ? '-' : '+' }}</span>
            </div>
            <div class="category-items" v-if="category.expanded">
              <router-link 
                v-for="item in category.items" 
                :key="item.path" 
                :to="item.path"
              >
                {{ item.label }}
              </router-link>
            </div>
          </div>
        </nav>
        <button class="toggle-btn" @click="toggleSidebar">
          {{ isCollapsed ? '▶' : '◀' }}
        </button>
      </aside>
      <div class="main-content">
        <header class="header">
          <h1>工具集合</h1>
        </header>
        <main class="main">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </main>
      </div>
    </div>
    <footer class="footer">
      <p>&copy; 2023 工具集合</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isCollapsed: false,
      categories: [
        {
          name: '基础工具',
          expanded: true,
          items: [
            { path: '/', label: '主页' },
            { path: '/base64', label: 'Base64编码/解码' },
            { path: '/json', label: 'JSON格式化' },
            { path: '/cron', label: 'Cron表达式' },
            { path: '/qrcode', label: '二维码生成' }
          ]
        },
        {
          name: '加解密工具',
          expanded: true,
          items: [
            { path: '/aes', label: 'AES 加解密' },
            { path: '/rsa', label: 'RSA 加解密' },
            { path: '/hash', label: '哈希工具' }
          ]
        },
        {
          name: '开发调试工具',
          expanded: true,
          items: [
            { path: '/regex', label: '正则表达式测试器' },
            { path: '/url', label: 'URL工具' },
            { path: '/timestamp', label: '时间戳转换器' },
            { path: '/http-debugger', label: 'HTTP 请求调试工具' },
            { path: '/snippet-manager', label: '代码片段管理工具' },
            { path: '/markdown-editor', label: 'Markdown 编辑器' },
            { path: '/format-tool', label: '格式化与压缩工具' }
          ]
        },
        {
          name: '建议反馈',
          expanded: true,
          items: [
            { path: '/feedback', label: '反馈建议' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
    toggleCategory(index) {
      this.categories[index].expanded = !this.categories[index].expanded;
    }
  }
};
</script>

<style scoped>
#app {
  font-family: 'Arial', sans-serif;
}
.app-container {
  display: flex;
}

.sidebar {
  width: 250px;
  background: linear-gradient(to bottom, #3498db, #2980b9);
  color: #fff;
  padding: 20px 15px;
  transition: width 0.3s ease;
  overflow: hidden;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.2);
  position: relative;
}

.sidebar.collapsed {
  width: 70px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.category {
  margin: 10px 0;
}

.category-header {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  margin-bottom: 5px;
}

.category-items {
  margin-top: 8px;
  padding-left: 12px;
}

.category-items a {
  display: block;
  margin: 4px 0;
  color: #ecf0f1;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}

.category-items a:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.header {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.main {
  min-height: 60vh;
  animation: fadeIn 0.5s ease-in;
}

.footer {
  text-align: center;
  padding: 10px;
  background-color: #ecf0f1;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 路由页面淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* 新的 toggle-btn 样式，放在侧边栏右侧中间 */
.sidebar .toggle-btn {
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #3498db;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: background 0.3s;
}

.sidebar .toggle-btn:hover {
  background: #2980b9;
}
</style> 